<template>
  <div class="smart-reconciliation-report">
    <!-- 报告头部 -->
    <el-card class="report-header" shadow="never">
      <div class="header-content">
        <div class="header-left">
          <h2>
            <el-icon class="title-icon"><Document /></el-icon>
            智能对账报告
          </h2>
          <div class="report-info">
            <span class="last-update">最后更新: {{ lastUpdate }}</span>
          </div>
        </div>
        <div class="header-actions">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="loadReport"
          />
          <el-button type="primary" :icon="Refresh" @click="loadReport" :loading="loading">
            刷新
          </el-button>
          <el-button :icon="Download" @click="exportReport">
            导出报告
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 对账统计概览 -->
    <el-row :gutter="20" class="stats-overview">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: '#1890ff' }">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(statistics.totalTransactions) }}</div>
              <div class="stat-label">总流水数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: '#52c41a' }">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(statistics.matchedCount) }}</div>
              <div class="stat-label">已匹配</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: '#fa8c16' }">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(statistics.pendingCount) }}</div>
              <div class="stat-label">待处理</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: '#722ed1' }">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.matchRate }}%</div>
              <div class="stat-label">匹配率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 对账详情 -->
    <el-row :gutter="20" class="details-section">
      <el-col :span="16">
        <el-card class="details-card">
          <template #header>
            <div class="card-header">
              <span>对账详情</span>
            </div>
          </template>
          <div class="details-content">
            <el-table :data="reconciliationDetails" style="width: 100%">
              <el-table-column prop="date" label="日期" width="120" />
              <el-table-column prop="bankCount" label="银行流水" width="100" />
              <el-table-column prop="orderCount" label="订单数" width="100" />
              <el-table-column prop="matchedCount" label="已匹配" width="100" />
              <el-table-column prop="matchRate" label="匹配率">
                <template #default="{ row }">
                  <el-progress 
                    :percentage="row.matchRate" 
                    :stroke-width="10" 
                    :show-text="false"
                    :color="getProgressColor(row.matchRate)"
                  />
                  <span class="rate-text">{{ row.matchRate }}%</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="summary-card">
          <template #header>
            <div class="card-header">
              <span>对账汇总</span>
            </div>
          </template>
          <div class="summary-content">
            <div class="summary-item">
              <div class="summary-label">今日对账</div>
              <div class="summary-value success">{{ formatNumber(summary.todayMatched) }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">本周对账</div>
              <div class="summary-value primary">{{ formatNumber(summary.weekMatched) }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">本月对账</div>
              <div class="summary-value warning">{{ formatNumber(summary.monthMatched) }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">异常记录</div>
              <div class="summary-value danger">{{ formatNumber(summary.anomalyCount) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { 
  ElMessage, 
  ElNotification 
} from 'element-plus'
import { 
  Document,
  Refresh, 
  Download, 
  Check, 
  Clock, 
  DataAnalysis
} from '@element-plus/icons-vue'

// 导入API
import { reconciliationAPI } from '@/api/reconciliation'

// 数据模型
interface Statistics {
  totalTransactions: number
  matchedCount: number
  pendingCount: number
  matchRate: number
}

interface ReconciliationDetail {
  date: string
  bankCount: number
  orderCount: number
  matchedCount: number
  matchRate: number
}

interface Summary {
  todayMatched: number
  weekMatched: number
  monthMatched: number
  anomalyCount: number
}

// 响应式数据
const dateRange = ref<string[]>([])
const loading = ref(false)
const lastUpdate = ref('')

const statistics = ref<Statistics>({
  totalTransactions: 0,
  matchedCount: 0,
  pendingCount: 0,
  matchRate: 0
})

const reconciliationDetails = ref<ReconciliationDetail[]>([])
const summary = ref<Summary>({
  todayMatched: 0,
  weekMatched: 0,
  monthMatched: 0,
  anomalyCount: 0
})

// 方法
const formatNumber = (num: number): string => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

const loadReport = async () => {
  loading.value = true
  try {
    // 调用API获取对账报告数据
    const params = {
      startDate: dateRange.value[0],
      endDate: dateRange.value[1]
    }
    
    const response = await reconciliationAPI.getReconciliationReportData(params)
    
    if (response.success) {
      // 更新统计数据
      statistics.value = response.data.statistics
      
      // 更新对账详情
      reconciliationDetails.value = response.data.details
      
      // 更新汇总信息
      summary.value = response.data.summary
      
      // 更新最后更新时间
      lastUpdate.value = new Date().toLocaleString('zh-CN')
      
      ElNotification({
        title: '报告加载完成',
        message: '对账报告数据已更新',
        type: 'success'
      })
    } else {
      ElMessage.error(response.message || '加载报告数据失败')
    }
  } catch (error) {
    ElMessage.error('加载报告数据失败: ' + (error as Error).message)
  } finally {
    loading.value = false
  }
}

const exportReport = () => {
  // 模拟导出报告
  ElMessage.success('报告导出成功!')
}

const getProgressColor = (percentage: number) => {
  if (percentage >= 90) return '#52c41a'
  if (percentage >= 70) return '#fa8c16'
  return '#ff4d4f'
}

// 组件挂载时加载数据
onMounted(() => {
  // 设置默认日期范围为最近30天
  const endDate = new Date()
  const startDate = new Date()
  startDate.setDate(startDate.getDate() - 30)
  
  dateRange.value = [
    startDate.toISOString().split('T')[0],
    endDate.toISOString().split('T')[0]
  ]
  
  // 加载初始数据
  loadReport()
})
</script>

<style scoped lang="scss">
.smart-reconciliation-report {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100%;
  
  .report-header {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-left {
        h2 {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
          color: #303133;
          display: flex;
          align-items: center;
          gap: 8px;
          
          .title-icon {
            color: #409eff;
          }
        }
        
        .report-info {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-top: 8px;
          
          .last-update {
            font-size: 14px;
            color: #909399;
          }
        }
      }
      
      .header-actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }
    }
  }
  
  .stats-overview {
    margin-bottom: 20px;
    
    .stat-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      }
      
      .stat-content {
        display: flex;
        align-items: center;
        padding: 20px;
        
        .stat-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          .el-icon {
            font-size: 24px;
            color: white;
          }
        }
        
        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }
  
  .details-section {
    .details-card,
    .summary-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      
      .card-header {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }
    
    .details-content {
      .rate-text {
        margin-left: 8px;
        font-size: 14px;
        color: #606266;
      }
    }
    
    .summary-content {
      .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .summary-label {
          font-size: 14px;
          color: #606266;
        }
        
        .summary-value {
          font-size: 18px;
          font-weight: bold;
          
          &.success {
            color: #52c41a;
          }
          
          &.primary {
            color: #1890ff;
          }
          
          &.warning {
            color: #fa8c16;
          }
          
          &.danger {
            color: #ff4d4f;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .smart-reconciliation-report {
    padding: 10px;
    
    .report-header {
      .header-content {
        flex-direction: column;
        gap: 16px;
        
        .header-left,
        .header-actions {
          width: 100%;
        }
        
        .header-actions {
          justify-content: center;
        }
      }
    }
    
    .stats-overview {
      .el-col {
        margin-bottom: 16px;
      }
    }
    
    .details-section {
      .el-col {
        margin-bottom: 16px;
      }
    }
  }
}
</style>